<template>
	<view>
		<view class="all">
			<!-- 头像 -->
			<image :src="avatar" style="width: 200rpx;height: 200rpx;"></image>
			<!-- 用户名 -->
			<view>{{    userinfo.nickname }},您好！</view>
			<!-- 登录/注册/退出 -->
			<view class="cli">
				<button v-show="userinfo.username == '您好，请先登录'" class="mini-btn cli_a" @click="login()" type="primary" size="mini">登录</button>
				<button class="mini-btn cli_b" @click="register()" type="primary" size="mini">注册新账号</button>
				<button class="mini-btn cli_c" @click="exit()" type="primary" size="mini">退出本账号</button>
			</view>
		</view>
	</view>
</template>

<script>
import bill from '../../api/pay.js';
export default {
	data() {
		return {
			avatar: '../../static/pic/avatar.png',
			userinfo: {
				
				username: '您好，请先登录'
			}
		};
	},
	methods: {
		// 登录
		login() {
			uni.redirectTo({
				url: '/pages/login/login'
			});
		},
		// 注册
		register() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		// 退出登录，清空token
		exit() {
			uni.removeStorage({
				key: 'token',
				success(res) {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		// 拿着token找用户信息
		getUser() {
			try {
				const value = uni.getStorageSync('token');
				if (!value) {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				} else {
					bill.getUserInfoByToken().then(res => {
						this.userinfo = res.data.data.userInfo;

					});
				}
			} catch (e) {
				// error
			}
		}
	},
	onShow() {
		this.getUser();
	}
};
</script>

<style scoped lang="less">
.all {
	border: 10px #d5ebe1 solid;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.cli {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.cli_a,
		.cli_b,
		.cli_c {
			margin: 10rpx;
		}
	}
}
</style>
